<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>联系客服</title>
    <meta name="viewport" content="width=device-width, initial-scale=1 ,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="static/ydui/ydui.rem.css">
    <link rel="stylesheet" href="static/css/font-awesome.min.css">
    <link rel="stylesheet" href="static/css/main.css">
    <!-- 引入rem自适应类库 -->
    <script src="static/ydui/ydui.flexible.js"></script>
</head>
<body>
<div id="app" v-cloak style="height:100%;background-color: #fff;">
    <yd-layout>
    	
    	<yd-navbar slot="navbar" title="联系客服">
            <a href="center.html" slot="left">
                <yd-navbar-back-icon>返回</yd-navbar-back-icon>
            </a>
        </yd-navbar>

        <div class="ox-login-title">联系客服</div>
        <yd-cell-group class="ox-login-cell-group">
            <yd-cell-item>
                <span slot="left">手机：</span>
                <input slot="right" type="number" placeholder="请输入您的联系方式，客服将会联系您" v-model="phone">
            </yd-cell-item>
        </yd-cell-group>

        <div class="yd-button">
            <yd-button size="large" type="hollow" class="ox-login-button" @click.native="contactUs">确定</yd-button>
        </div>

    </yd-layout>
</div>
<!-- 引入 Vue -->
<script src="static/lib/vue.min.js"></script>
<script src="static/lib/jquery.min.js"></script>
<script src="static/lib/fastclick.js"></script>
<script>
    $(function() {
        FastClick.attach(document.body);
    });
</script>
<!-- 引入组件库 -->
<script src="static/ydui/ydui.rem.js"></script>
<script src="static/js/common.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        data:{
           phone:''
        },
        methods:{
            contactUs:function () {
                if(!vm.phone){
                    this.$dialog.toast({
                        mes: '手机号不能为空',
                        icon: 'error',
                        timeout: 1500
                    });
                    return;
                }else if(!/1[3|4|5|6|7|8|9]\d{9}/.test(vm.phone)){
                    this.$dialog.toast({
                        mes: '手机号格式错误',
                        icon: 'error',
                        timeout: 1500
                    });
                    return;
                }else if(vm.phone.length != 11){
                    this.$dialog.toast({
                        mes: '您输的不是手机号',
                        icon: 'error',
                        timeout: 1500
                    });
                    return;
                }

                var pt = this;
                pt.$dialog.loading.open('转入中...');

                $.ajax({
                    type: "POST",
                    url: baseURL + "/api/v1/contact",
                    data: JSON.stringify({mobile:vm.phone}),
                    contentType: "application/json",
                    dataType:  "json",
                    success: function(r){
                        pt.$dialog.loading.close();

                        if(r.code == 'OK'){
                            pt.$dialog.toast({
                                mes: '登记成功，请耐心等待客服联系',
                                icon: 'success',
                                timeout: 1500,
                                callback:function () {
                                    location.href = 'center.html';
                                }
                            });
                        }else {
                            pt.$dialog.toast({
                                mes: r.code,
                                icon: 'error',
                                timeout: 1500
                            });
                        }
                    },
                    error:function(e){
                        pt.$dialog.loading.close();
                        if(typeof e.responseJSON != 'undefined'){
                            pt.$dialog.toast({
                                mes: e.responseJSON.code,
                                icon: 'error',
                                timeout: 1500
                            });
                        }else {
                            pt.$dialog.toast({
                                mes: '服务异常',
                                icon: 'error',
                                timeout: 1500
                            });
                        }
                    }
                });
            }
        }
    });
</script>
</body>
</html>